<script>
// import { useRouter} from 'vue-router' 
// ,onBeforeUnmount,onMounted
import {ref } from "vue"
import {onActivated,reactive, toRefs } from '@vue/runtime-core'
import { getJsonshop } from "../api/shop.js";
import { useRouter} from 'vue-router'
import { useStore } from "../store/index";
    export default {
        setup() {
            let router = useRouter();
            let data = reactive({//实现响应式
                 lists:[
                    {   
                        id:1,
                        title:"果蔬",
                        img:require("../assets/img/guosu.png")
                    },
                    {   
                        id:2,
                        title:"海鲜",
                        img:require("../assets/img/haixian.png")
                    },
                    {   
                        id:3,
                        title:"肉蛋",
                        img:require("../assets/img/roudan.png")
                    },
                    {   
                        id:4,
                        title:"粮油",
                        img:require("../assets/img/youliang.png")
                    },
                    {   
                        id:5,
                        title:"烘焙",
                        img:require("../assets/img/hongbei.png")
                    },
                    {   
                        id:6,
                        title:"零食",
                        img:require("../assets/img/lingshi.png")
                    },
                    {   
                        id:7,
                        title:"冲调饮品",
                        img:require("../assets/img/yinpin.png")
                    },
                    {   
                        id:8,
                        title:"个护",
                        img:require("../assets/img/gehu.png")
                    },
                    {   
                        id:9,
                        title:"餐厨",
                        img:require("../assets/img/canchu.png")
                    },
                    {   
                        id:10,
                        title:"家居",
                        img:require("../assets/img/jiaju.png")
                    },
                ],
                num:0,
            })

            let store=useStore()
             data.num=store.shopnum
            let shopList =ref([]);//商品列表
            // const list = ref([]);
            const loading = ref(false);
            const finished = ref(false);

            // 获取商品列表数据
            const onLoad =()=>{

                getJsonshop().then(data=>{
                    
                    
                    for (let i = 0; i < 20; i++) {
                        shopList.value.push(data.data[shopList.value.length]);
                    }

                    if (shopList.value.length >= 150) {
                        finished.value = true;
                    }
                })

                // 加载状态结束
                loading.value = false;
            }
            
            // 点击跳转详情页
            let goods=(shopid)=>{

                router.push({
                   path:"/shopDetail",
                   query:{
                        shopid
                    }
                })
            }
            let search=(id,title)=>{
                router.push({
                    path:"/shopSearchList",
                    query:{
                        title,
                        back:"/shop",
                        id:id
                    }
                })
            }


            
            let getScroll=()=>{
                let shopview = document.getElementById("shopview")
                console.log(shopview.scrollTop);
                localStorage.setItem("shopviewTop", JSON.stringify(shopview.scrollTop))
            }

            onActivated(() => {
                console.log("我被激活");
                console.log("shopviewTop=>", JSON.parse(localStorage.shopviewTop || 0));
                let shopview = document.getElementById("shopview")
                // console.log(shopview.scrollTop);
                shopview.scrollTop = JSON.parse(localStorage.shopviewTop || 0)
            })

            
           



            return {
               ...toRefs(data),//解构展开
                onLoad,
                shopList,
                loading,
                finished,
                goods,
                search,
                getScroll
            }
        },
    }
</script>


<template>
    <div class="shop" >
        <div class="wrapper" id="shopview" @scroll="getScroll($event)">
            <!-- 头部 -->
            <div class="header">
                <router-link to="/shopSearch" class="header_left iconL icon-sousuo"></router-link>
                <div class="header_center"><strong>商城</strong></div>
                <router-link to="/ShoppingCart" class="header_right iconL icon-gouwuche"><span v-show="num!=0">{{num}}</span></router-link>
            </div>

            <!-- 分类 -->
            <div class="type">
                <ul>
                    <li v-for="item in lists" :key="item.id" @click="search(item.id,item.title)">
                        <img :src="item.img" alt="">
                        <p>{{item.title}}</p>
                    </li>
                </ul>
            </div>

            <!-- 商品列表 -->
            <div class="shopList">
                <h4>全部商品</h4>
                <van-list
                    v-model:loading="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                >

                <ul>
                    <li v-for="item in shopList" :key="item.shopid" @click="goods(item.shopid)">
                        <div class="img">
                            <img :src="item.url" alt="">
                            <div class="freeship" v-if="item.free">包邮</div>
                        </div>
                        <p class="tip">{{item.tip}}</p>
                        <p class="title">{{item.title}}</p>
                        <div class="price">
                            <div class="newprice">￥{{item.newprice}}</div>
                            <div class="oldprice"><del>￥{{item.oldprice}}</del></div>
                        </div>
                    </li>
                    
                </ul>

                </van-list>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.shop{
    .wrapper{
        width: 100%;
        height: calc(100vh - 55px);
        overflow: auto;
        .header{
            position: fixed;
            top: 0;
            left: 0;
            background-color: #fff;
            z-index: 1;
            width: 100%;
            // padding: 0 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 43px;
            box-shadow: 0px 2px 5px #f2f3f3;
            .header_left{
                font-size: 22px;
                padding: 0 16px;
            }
            // .header_center{}
            .header_right{
                padding: 0 16px;
                font-size: 22px;
                position: relative;
                span{
                    position: absolute;
                    top: -3px;
                    right: 12px;
                    font-size: 10px;
                    width: 15px;
                    height: 15px;
                    color: #fff;
                    text-align: center;
                    border-radius: 50%;
                    background-color: #de2e20;
                }
            }
        }
        .type{
            margin-top: 52px;
            &>ul{
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                &>li{
                    // height: 52px;
                    width: 20%;
                    padding-top: 7px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    img{
                        height: 35px;
                    }
                    p{
                        font-size: 10px;
                        padding: 2px 0 6px 0;
                    }
                }
            }
        }
        .shopList{
            padding: 0 16px 52px;
            margin-top: 4px;
            & > h4{
                height: 36px;
                line-height: 36px;
            }
             ul{
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                & > li{
                    width: calc(50% - 5.5px);
                    margin-bottom: 36px;
                    margin-right: 11px;
                    &:nth-child(2n){
                        margin-right: 0;
                    }
                    & > .img{
                        width: 100%;
                        position: relative;
                        img{
                            width: 100%;
                            border-top-left-radius: 8px;
                            border-top-right-radius: 8px;
                        }
                        .freeship{
                            position: absolute;
                            top: 8px;
                            left: 8px;
                            font-size: 10px;
                            transform: scale(0.9);
                            color: #333;
                            background-color: #feca3e;
                            padding: 3px 5px;
                            border-radius: 6px;
                        }
                    }
                    .tip{
                        padding: 0 8px;
                        height: 32px;
                        line-height: 32px;
                        background-color: #eeeeee;
                        border-bottom-left-radius: 8px;
                        border-bottom-right-radius: 8px;
                        font-size: 10px;
                        white-space: nowrap;
                        overflow: hidden;
                        text-overflow: ellipsis;
                    }
                    .title{
                        font-size: 11px;
                        padding: 7px 0px 0 0;
                        height: 33px;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        overflow: hidden;
                    }
                    .price{
                        display: flex;
                        align-items: flex-end;
                        padding: 4px 0;
                        .newprice{
                            font-size: 15px;
                            color: #f51505;
                            font-weight: 500;
                        }
                        .oldprice{
                            transform: scale(0.9);
                            font-size: 10px;
                            color: #aaa;
                        }
                    }
                }
            }
        }
    }
}
</style>